<!DOCTYPE html><html><head><title>01、常用的HTML标签</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}


</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="01常用的html标签">01、常用的HTML标签</h1>



<h3 id="一什么是语言">一、什么是语言？</h3>

<blockquote>
  <p><strong>语言：</strong>是人类最重要的沟通工具，是人们进行交流的主要表达方式。 <br>
  <strong>Web前端开发语言：</strong>和浏览器进行沟通的语言。</p>
</blockquote>

<h3 id="二web前端开发语言">二：Web前端开发语言</h3>

<blockquote>
  <p><strong>HTML：</strong>HTML是一种用来描述网页的超文本标记语言，网页的骨架。 <br>
  <strong>CSS：</strong>CSS层叠样式表 ，用来修饰、美化网页。 <br>
  <strong>JavaScript：</strong>脚本语言，网页的大脑，让网页中的元素运动起来。</p>
</blockquote>



<h3 id="三html简介">三、HTML简介</h3>

<blockquote>
  <p>HTML是目前最流行的网页制作语言。HTML（Hypertext Markup Language）即 超文本标记语言，是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记 语言，通过结合使用其他的Web技术可以创造出功能强大的网页。</p>
</blockquote>

<h3 id="四html标签">四、HTML标签</h3>

<blockquote>
  <p>HTML指的是超文本标记语言，标记语言是一套标记标签 <br>
  HTML 标记标签通常被称为 HTML标签 (HTML tag) <br>
  HTML 标签是由尖括号包围的关键词，比如 <code>&lt;html&gt;</code> <br>
  HTML 标签通常是成对出现的，比如<code>&lt;b&gt;</code>和 <code>&lt;/b&gt;</code> <br>
  标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签，也被称为开放标签和闭合标签</p>
</blockquote>

<h3 id="五常用的标签">五、常用的标签</h3>

<p><strong>1、标题标签：</strong></p>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>1级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>2级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>3级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>4级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>5级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>6级标题<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
</div></code></pre>

<p><strong>2、行标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>一行文本<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</div></code></pre>

<p><strong>3、段落标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>一段文本<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</div></code></pre>

<p><strong>4、斜体标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>斜体文本<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
</div></code></pre>

<p><strong>5、加粗标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>这里是加粗的文本<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
</div></code></pre>

<p><strong>6、斜体(强调)：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>这是具有强调性的斜体文本<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>
</div></code></pre>

<p><strong>7、加粗（强调）：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>这是具有强调性的加粗文本<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
</div></code></pre>

<p><strong>8、下标标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">sub</span>&gt;</span>只有文字高度一般，并在下边的文本<span class="hljs-tag">&lt;/<span class="hljs-name">sub</span>&gt;</span>
</div></code></pre>

<p><strong>9、上标标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>只有文字高度一般，并在上边的文本<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span>
</div></code></pre>

<p><strong>10、换行标签</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs apache"><div class="hljs-line">    <span class="hljs-section">&lt;br/&gt;</span> 
</div></code></pre>

<p><strong>11、水平线</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs apache"><div class="hljs-line">    <span class="hljs-section">&lt;hr/&gt;</span> 
</div></code></pre>

<p><strong>12、有序列表标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>1、第一道题<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>2、第二道题<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>3、第三道题<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span>
</div></code></pre>

<p><strong>13、无序列表：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>好友1号<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>好友2号<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>好友3号<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
</div></code></pre>

<p><strong>14、自定义列表标签：</strong></p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>列表项标题<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>列表项<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
</div></code></pre>

<p><strong>15、img图片标签：</strong></p>

<ul><li><strong>img的四要素</strong> <br>
<code>src：</code>图片的路径 <br>
<code>width：</code> 图片的宽度 <br>
<code>height：</code>图片高度 <br>
<code>alt ：</code>图片的替代文本</li>
</ul>

<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line">    &lt;<span class="hljs-selector-tag">img</span> src=<span class="hljs-string">"imges/01.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-string">"200"</span> height=<span class="hljs-string">"300"</span> alt=<span class="hljs-string">"图片"</span>/&gt;
</div></code></pre>



<h3 id="六路径">六、路径</h3>

<p><strong>1、</strong>相对路径：相对于当前文档位置去寻找文件</p>



<pre class="prettyprint hljs-dark"><code class="hljs ebnf"><div class="hljs-line"><span class="hljs-attribute">     src</span>=<span class="hljs-string">"imges/01.jpg"</span>
</div></code></pre>

<p><strong>2、</strong>绝对路径：相对于盘符位置去寻找文件</p>



<pre class="prettyprint hljs-dark"><code class="hljs 1c"><div class="hljs-line">    <span class="hljs-comment">//本地绝对路径：相对于盘符位置去寻找文件</span>
</div><div class="hljs-line">     src=<span class="hljs-string">"C:/Users/Desktop/imges/01.jpg"</span>  
</div></code></pre>

<pre class="prettyprint hljs-dark"><code class="hljs 1c"><div class="hljs-line">    <span class="hljs-comment">//网络绝对路径：从域名出发</span>
</div><div class="hljs-line">    src=<span class="hljs-string">"https://www.baidu.com/img/bd_logo1.png"</span>
</div></code></pre>

<p><code>注：绝对路径中不要出现中文</code></p>

<h3 id="七a标签">七、a标签</h3>

<blockquote>
  <p><code>href：</code>指定a标签要跳转的目的地 <br>
  <code>target：</code>链接窗口的打开方式</p>
</blockquote>

<p><strong>作用：</strong> <br>
1、超链接：链接网页</p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'https://www.baidu.com'</span>&gt;</span>点击跳转百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div></code></pre>

<p>2、锚点：在当前网页中跳转到指定位置</p>

<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'#ID名'</span>&gt;</span>点击位置1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div></code></pre></div></body></html>